<script>
export default {
  // functional: true,  启用函数化组件
  name: 'anchor',
  props: {
    level: {
      type: Number,
      default: 1
    },
    def: {
      type: Boolean,
      default: false
    }
  },
  render(createElement) {
    return createElement (
      this.tdiv,
      {
        //数据对象
        class: {
          foo: true,
          ooc: true
        },
        attrs: {
          id: 'foo'
        },
        style: {
          color: 'red'
        },
        props: {
          ctitle: 'ctitle'
        },
        domProps: this.showInner,
        //自定义事件监听器on
        //不支持修饰器
        on: {
          click() {
            console.log('事件监听器on')
          }
        },

      },
      [
        createElement (
          'h1',
          '头部'
        ),
        createElement (
          'h4',
          this.$slots.default
        ),
      ]
    )
  },
  data() {
    return {
      title: '锚点组件',
      tdiv: 'div'
    }
  },
  computed: {
    showInner() {
      return this.def ? {innerHTML: '会覆盖内容'} : ''
    }
  }
}
</script>
